<template>
  <div class="w-full h-full flex flex-col">
    <a-menu
      mode="horizontal"
      type="inner"
      class="bg-transparent mb-2"
      :selectedKeys="selectedKeys"
      @click="menuChange"
    >
      <a-menu-item v-for="item in list" :key="item.YtId">{{item.YtSystemTypeName}}</a-menu-item>
    </a-menu>
    <a-card
      class="flex-1 rounded"
      :body-style="{padding: '12px 16px', height:'100%',display:'flex','flex-direction':'column'}"
      :bordered="false"
    >
      <div class="mb-[22px]">
        <a-button type="primary" @click="save">{{ $t('user.verification-code.required111566110577209') }}</a-button>
      </div>
      <editor class="flex-1" :value="value" @change="editorChange" :key="selectedKeys[0]" />
    </a-card>
  </div>
</template>

<script>
import { getAgreemenetList, getAgreemenet, setAgreemenet } from '@/api/index'
import { Editor } from '@/components'

export default {
  components: {
    Editor,
  },
  data() {
    return {
      list: [],
      selectedKeys: [],
      value: '',
      typeName: '',
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        const { data } = await getAgreemenetList()
        this.list = [...data.Lists]
        this.selectedKeys = this.list[0].YtId ? [this.list[0].YtId] : []
        this.setEdtor()
      } catch (error) {
        this.$message.error(error)
      }
    },
    async menuChange(item) {
      this.selectedKeys[0] = item.key
      this.setEdtor()
    },
    async setEdtor() {
      const id = this.selectedKeys[0] || 0
      try {
        const { data } = await getAgreemenet({ id })
        this.value = data.YtSystemHtml || ''
        this.typeName = data.YtSystemTypeName || ''
      } catch (error) {
        this.$message.error(error)
      }
    },
    editorChange(e) {
      this.value = e
    },
    async save() {
      const id = this.selectedKeys[0] || 0
      const typeName = this.typeName
      const html = this.value
      try {
        await setAgreemenet({ id, typeName, html })
        this.setEdtor()
        this.$message.success(this.$t('user.verification-code.required111566110577209'))
      } catch (error) {
        this.$message.error(error)
      }
    },
  },
}
</script>
